(function () {
  let sLists = Array.from(mus.querySelectorAll('ul'))

  const queryData = function queryData() {
    return new Promise(resolve => {
      let xhr = new XMLHttpRequest;
      xhr.open('GET', './Alljson/榜单/data.json');
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
          let data = JSON.parse(xhr.responseText);
          resolve(data);
        }
      };
      xhr.send();
    });
  };


  const binding = function binding(data) {
    for (let i = 0; i < data.length; i += 10) {
      let group = data.slice(0, 10)
      let str = ''
      group.forEach((item, index) => {
        let { id, tit } = item
        str += `<li>
        <span>${id}</span>
        <p>${tit}</p>
        <div class="three_box">
          <div class="three_play"></div>
          <div class="three_plus"></div>
          <div class="three_docu"></div>
        </div>
      </li>`
      })
      return str
    }
  }

  const binding1 = function binding1(data) {
    for (let i = 0; i < data.length; i += 10) {
      let group = data.slice(10, 20)
      let str = ''
      group.forEach((item, index) => {
        let { id, tit } = item
        str += `<li>
        <span>${id}</span>
        <p>${tit}</p>
        <div class="three_box">
          <div class="three_play"></div>
          <div class="three_plus"></div>
          <div class="three_docu"></div>
        </div>
      </li>`
      })
      return str
    }
  }
  const binding2 = function binding2(data) {
    for (let i = 0; i < data.length; i += 10) {
      let group = data.slice(20, 30)
      let str = ''
      group.forEach((item, index) => {
        let { id, tit } = item
        str += `<li>
        <span>${id}</span>
        <p>${tit}</p>
        <div class="three_box">
          <div class="three_play"></div>
          <div class="three_plus"></div>
          <div class="three_docu"></div>
        </div>
      </li>`
      })
      return str
    }
  }


  queryData().then(value => {
    let html = binding(value)
    let html1 = binding1(value)
    let html2 = binding2(value)
    sLists[0].innerHTML = html
    sLists[1].innerHTML = html1
    sLists[2].innerHTML = html2
  })
})()